Angular MyFlix Case Study

Achievement 6 Project

Developing MyFlix: An Angular Single-Page Application

Bridging a RESTful API with a modern, responsive frontend.

1. Project Objective & Context

Objective: To build the client-side for the existing myFlix server-side (REST API) using the Angular framework (v9+). The final product is a single-page, responsive application with multiple interface views for user authentication and movie data consumption.

Context: Agile Handoffs

This project served as a crucial exercise in modern workplace collaboration and communication. By developing detailed documentation, user stories, story points, and a kanban board, the focus was placed not only on the technical implementation of the Angular app but also on the ability to create clear and indispensable handoffs for other developers and stakeholders. This demonstrates proficiency in Agile project management and technical communication, which are vital for remote and collaborative environments.

2. Project Definition (The 5 W's)

Who

The users of the myFlix movie app, including movie enthusiasts, as well as other developers and designers interacting with the codebase.

What

A responsive, single-page movie app built with Angular. It features routing, multiple views, and handles data via a REST API. Accompanied by full documentation (JSDoc, Typedoc) and a kanban board.

When & Where

The app is hosted online, accessible anytime, anywhere, and on any device (responsive design).

Why

To provide movie enthusiasts with easy access to information (movies, directors, genres) and personalized features (favorite lists), while demonstrating strong command of the Angular framework and professional documentation skills to potential employers.

3. Design & Features

User Stories

  • As a user, I want to be able to receive information on movies, directors, and genres so that I can learn more about movies I’ve watched or am interested in.
  • As a user, I want to be able to create a profile so I can save data about my favorite movies.

Key Application Features

  • **Welcome View:** Landing page to handle user **Login** or **Registration**.
  • **Movie View:** Displays a collection of all movies in a responsive card layout.
  • **Single Movie View:** Displays granular details about a selected movie.
  • **Director View:** Dedicated view accessible from a movie page, showing details about the movie's director.
  • **Genre View:** Dedicated view accessible from a movie page, showing details about the movie's genre.

4. Technical Stack & Requirements

Core Technology

  • **Framework:** Angular (version 9 or later).
  • **Language:** TypeScript (via Angular).
  • **Styling:** Angular Material (mandatory for design and UI components).
  • **API:** Connects to the existing myFlix REST API (from Achievement 2).
  • **Deployment:** Hosted on GitHub Pages.

Code Quality & Documentation

  • **Code Comments:** Must use **Typedoc** style comments for all components and services.
  • **Technical Handoff:** Must contain comprehensive **JSDoc** style technical documentation.
  • **Project Management:** Utilized **Agile** techniques including a detailed **Kanban Board** with **User Stories** and **Story Points**.
  • **Dependencies:** Requires latest versions of Node.js and npm.

5. Project Deliverables Timeline

  1. Exercise 1: Project Management

    Kanban board setup, user flow creation, non-technical interview practice.

  2. Exercise 2: Angular Introduction

    Angular CLI app creation, technical interview preparation.

  3. Exercise 3: Forms & Material

    Implementation of user registration and login forms using Angular Material components.

  4. Exercise 4: Core Views & Routing

    Implementation of movie card component and defining the application's core routing structure.

  5. Exercise 5: Documentation & Handoffs

    Codebase commenting (Typedoc), preparing technical documentation (JSDoc), and finalizing the kanban board.

  6. Exercise 6 & 7: Finalization

    Constructive feedback review, portfolio incorporation, and final interview practice.